<template>
  <div class="cooks-list">
    <u-navbar
      title="厨房日志"
      :title-style="{ 'font-weight': 'bold', 'font-size': '18px' }"
      fixed
      placeholder
      @leftClick="handleBack"
    ></u-navbar>
    <form 
    action="/" 
    class="form-wrap"
    >
      <u-search
        v-model="cookname"
        class="search-shop"
        placeholder="名称"
        margin="0px 12px"
        :show-action="false"
        @search="handleSearch"
      ></u-search>
    
      <text
        v-if="pickvalue"
        class="search-selected-status"
        @click="showPicker = true"
      >
        {{ pickvalue }}
      </text>
      <text
        v-else
        class="search-status"
        @click="showPicker = true"
      >
        请选择星度
      </text>

      <u-picker
        :show="showPicker"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      ></u-picker>
    </form>
    <div class="gl-list">
      <div class="gl-item">
        <div class="btn-wrap">
          <span class="gl-add-icon"><van-icon name="plus" /></span>
          <span
            class="gl-add-text"
            @click="clickAdd"
          >
            添加日志
          </span>
        </div>
      </div>
      <div 
        v-for="(row, indx) in lists" 
        :key="indx" 
        class="gl-item gl-content-item"  
        @click="clickEdit(row)"
        >
        <img class="gl-i-img" :src="row.imgs[0].url" alt="">
        <div class="gl-i-content">
          <div class="gl-i-firstrow">
            <span>{{ row.cookname }}</span>
            <span class="gl-time">{{ getDay(row.updated) }}</span>
            <span class="gl-status">{{ maps[row.status] }}</span>
          </div>
          <div class="gl-i-sec">{{ row.food || '主材' }}</div>
          <div class="gl-i-thrrow">{{ row.ingredient || '配料' }}</div>
          <div class="gl-i-four">{{ row.mark || '备注' }}</div>
        </div>
      </div>
       
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

const statusTxts = {
  1: '1星',
  2: '2星',
  3: '3星',
  4: '4星',
  5: '5星',
};

export default {
  name: 'Goodlist',
  layout: 'barHeight',
  data() {
    return {
      lists: [],
      maps: statusTxts,
      reverseMaps: Object.entries(statusTxts).reduce((acc, item) => {
        acc[item[1]] = item[0]
        return acc
      }, {}),
      pickvalue: '',
      showPicker: false,
      columns: [['全部', ...Object.values(statusTxts)]],
      cookname: '', // 搜索框绑定值
    }
  },
 
  onShow() {
    this.getdata()
  },

  methods: {
    getDay(val) {
      return dayjs(val).format('YYYY年MM月DD日')
    },
    onConfirm(args) {
      this.pickvalue = args.value[0]
      this.showPicker = false
      this.getdata()
    },
    async getdata(value) {
      const res = await this.$request.post('/cook/list', {
        pageNo: 1,
        pageSize: 200,
        status: this.reverseMaps[this.pickvalue],
        cookname: this.cookname,
      })
      this.lists = (res && res.data) || [];
    },
    back() {},
    clickAdd() {
      uni.navigateTo({
        url: '/pages/cookadd/add',
      })
    },
    // 导航栏返回
    handleBack() {
      uni.navigateBack({
        delta: 1,
      })
    },
    clickEdit(row) {
      uni.navigateTo({
        url: `/pages/cookadd/add?cookname=${row.cookname}`,
      })
    },
    handleSearch() {
      this.getdata()
    },
    handleNavTabChange(tabName) {
      this.tab = tabName
    },
  },
}
</script>

<style lang="less" scoped>
.cooks-list {
  .search-status,
  .search-selected-status {
    position: absolute;
    top: 0;
    right: 62px;
    bottom: 0;
    line-height: 34px;
    font-size: 13px;
    opacity: 0.8;
    color: #606266;
  }
  .form-wrap {
    display: flex;
    position: relative;
    margin-top: 12px;
    .search-field {
      flex: 1;
    }
    .status-field {
      width: 135px;
    }
  }
  .gl-list {
    padding: 0 12px 12px 12px;
  }
  .btn-wrap {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .gl-item {
    box-shadow: 0 0 27px -14px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    margin-top: 14px;
    padding: 0 12px;
  }
  .gl-add-text {
    line-height: 17px;
    font-size: 14px;
    color: #538fff;
  }
  .gl-add-icon {
    .van-icon-plus {
      &::before {
        color: #538fff;
        font-weight: 800;
        margin-right: 2px;
      }
    }
  }

  .gl-i-img{
    width: 100px;
    height: 100px;
    border-radius: 9px;
    object-fit: cover;
  }

   .gl-i-firstrow {
    color: black;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    justify-content: space-between;
  }
  .gl-i-sec,.gl-i-thrrow, .gl-i-four{
    margin-top: 8px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gl-i-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    margin-left: 10px;
  }
  .gl-content-item{
    display: flex;
    padding: 12px;
    flex: 1;
  }
  .gl-status{
    font-size: 12px;
    font-weight: 400;
    color: #538fff;
  }
  .gl-time{
    font-size: 12px;
    font-weight: 400;
  }
  .search-selected-status {
    color: black;
  }
}
</style>
